<template>
  <div class="min-h-screen bg-slate-50 relative">
    <div class="w-full max-w-[1920px] mx-auto px-6 py-6 relative">
      <!-- Dashboard内容区域Loading -->
      <div v-if="loading" class="absolute inset-0 bg-white bg-opacity-95 flex items-center justify-center z-10 rounded-lg min-h-screen">
        <div class="text-center">
          <n-spin size="large" />
          <p class="mt-4 text-lg text-slate-600">正在加载数据大屏...</p>
        </div>
      </div>
      <!-- Dashboard内容 -->
      <div>
        <div class="flex justify-between items-center mb-6">
          <h1 class="text-3xl font-bold text-slate-800">数据大屏</h1>
          <div style="display: flex; gap: 12px;">
            <n-button type="info" @click="fetchDashboardData" :loading="loading" :disabled="loading">
              刷新数据
            </n-button>
          </div>
        </div>

      <section v-if="!loading && dashboardData" class="mb-8">
        <h2 class="text-2xl font-bold mb-4 text-slate-700">数据总览</h2>
        <div class="flex gap-4 justify-between">
          <n-card class="bg-white shadow-sm hover:shadow-md transition-shadow w-[360px]">
            <div class="flex items-center justify-between">
              <div class="flex-1">
                <p class="text-gray-500 text-sm">授课计划总数</p>
                <p class="text-2xl font-bold text-blue-600">{{ statistics.teachingPlans }}</p>
              </div>
              <div class="bg-blue-100 p-2 rounded-full ml-2">
                <n-icon size="20" class="text-blue-500"><BookOutline /></n-icon>
              </div>
            </div>
            <div class="mt-2 flex items-center text-xs">
              <n-icon class="text-green-500 mr-1" size="12"><TrendingUpOutline /></n-icon>
              <span class="text-green-500">{{ statistics.teachingPlansGrowth }}%</span>
              <span class="text-gray-500 ml-1">较上月</span>
            </div>
          </n-card>
          <n-card class="bg-white shadow-sm hover:shadow-md transition-shadow w-[360px]">
            <div class="flex items-center justify-between">
              <div class="flex-1">
                <p class="text-gray-500 text-sm">干部总数</p>
                <p class="text-2xl font-bold text-purple-600">{{ statistics.cadres }}</p>
              </div>
              <div class="bg-purple-100 p-2 rounded-full ml-2">
                <n-icon size="20" class="text-purple-500"><PeopleOutline /></n-icon>
              </div>
            </div>
            <div class="mt-2 flex items-center text-xs">
              <n-icon class="text-green-500 mr-1" size="12"><TrendingUpOutline /></n-icon>
              <span class="text-green-500">{{ statistics.cadresGrowth }}%</span>
              <span class="text-gray-500 ml-1">较上月</span>
            </div>
          </n-card>
          <n-card class="bg-white shadow-sm hover:shadow-md transition-shadow w-[360px]">
            <div class="flex items-center justify-between">
              <div class="flex-1">
                <p class="text-gray-500 text-sm">中央单位数</p>
                <p class="text-2xl font-bold text-amber-600">{{ statistics.centralUnits }}</p>
              </div>
              <div class="bg-amber-100 p-2 rounded-full ml-2">
                <n-icon size="20" class="text-amber-500"><BusinessOutline /></n-icon>
              </div>
            </div>
            <div class="mt-2 flex items-center text-xs">
              <n-icon class="text-green-500 mr-1" size="12"><TrendingUpOutline /></n-icon>
              <span class="text-green-500">{{ statistics.centralUnitsGrowth }}%</span>
              <span class="text-gray-500 ml-1">较上月</span>
            </div>
          </n-card>
          <n-card class="bg-white shadow-sm hover:shadow-md transition-shadow w-[360px]">
            <div class="flex items-center justify-between">
              <div class="flex-1">
                <p class="text-gray-500 text-sm">授课高校数</p>
                <p class="text-2xl font-bold text-green-600">{{ statistics.universities }}</p>
              </div>
              <div class="bg-green-100 p-2 rounded-full ml-2">
                <n-icon size="20" class="text-green-500"><SchoolOutline /></n-icon>
              </div>
            </div>
            <div class="mt-2 flex items-center text-xs">
              <n-icon class="text-green-500 mr-1" size="12"><TrendingUpOutline /></n-icon>
              <span class="text-green-500">{{ statistics.universitiesGrowth }}%</span>
              <span class="text-gray-500 ml-1">较上月</span>
            </div>
          </n-card>
          <n-card class="bg-white shadow-sm hover:shadow-md transition-shadow w-[360px]">
            <div class="flex items-center justify-between">
              <div class="flex-1">
                <p class="text-gray-500 text-sm">厅局级干部</p>
                <p class="text-2xl font-bold text-teal-600">{{ statistics.departmentLevelCadres }}</p>
              </div>
              <div class="bg-teal-100 p-2 rounded-full ml-2">
                <n-icon size="20" class="text-teal-500"><PodiumOutline /></n-icon>
              </div>
            </div>
             <div class="mt-2 flex items-center text-xs">
              <span class="text-gray-500">当前在册</span>
            </div>
          </n-card>
        </div>
      </section>

      <section v-if="!loading && dashboardData" class="mb-8">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-2xl font-bold text-slate-700">本周上课信息</h2>
        </div>
        <n-card class="bg-white shadow-sm" content-style="padding: 0;">
          <div v-if="weeklyClassData.length > 0" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4">
            <n-card
              v-for="(classItem, index) in weeklyClassData"
              :key="index"
              size="small"
              hoverable
              class="rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out"
              :style="{ borderTop: `4px solid ${statusMap[classItem.status]?.color || '#e0e0e0'}` }"
            >
              <template #header>
                <div class="flex justify-between items-start">
                  <h3 class="text-base font-semibold text-slate-700 leading-tight pr-2">{{ classItem.name }}</h3>
                  <n-tag :type="statusMap[classItem.status]?.tagType || 'default'" size="tiny" round class="ml-auto flex-shrink-0 mt-0.5">
                    {{ statusMap[classItem.status]?.text || classItem.status }}
                  </n-tag>
                </div>
              </template>

              <div class="space-y-2 text-sm text-slate-600 pt-1">
                <p class="flex items-center">
                  <n-icon size="16" :component="PersonOutline" class="mr-2 text-slate-400 flex-shrink-0" />
                  <span class="font-medium mr-1">授课人:</span> <n-text>{{ classItem.teacherName }} ({{ classItem.teacherLevel }})</n-text>
                </p>
                <p class="flex items-center">
                  <n-icon size="16" :component="SchoolOutline" class="mr-2 text-slate-400 flex-shrink-0" />
                  <span class="font-medium mr-1">高校:</span> <n-text depth="2">{{ classItem.university }}</n-text>
                </p>
                <p class="flex items-center">
                  <n-icon size="16" :component="BusinessSharp" class="mr-2 text-slate-400 flex-shrink-0" />
                  <span class="font-medium mr-1">单位:</span> <n-text depth="2">{{ classItem.unit }}</n-text>
                </p>
                <n-divider class="my-1.5" />
                <p class="flex items-center">
                  <n-icon size="16" :component="CalendarOutline" class="mr-2 text-slate-400 flex-shrink-0" />
                  <span class="font-medium mr-1">时间:</span> <n-text depth="2">{{ classItem.time }}</n-text>
                </p>
                <p class="flex items-center">
                  <n-icon size="16" :component="LocationOutline" class="mr-2 text-slate-400 flex-shrink-0" />
                  <span class="font-medium mr-1">地点:</span> <n-text depth="2">{{ classItem.location }}</n-text>
                </p>
                <p class="flex items-center">
                  <n-icon size="16" :component="PeopleOutline" class="mr-2 text-slate-400 flex-shrink-0" />
                  <span class="font-medium mr-1">人数:</span> <n-text depth="2">{{ classItem.participants }} 人</n-text>
                </p>
              </div>
            </n-card>
          </div>
          <div v-else class="text-center py-16">
            <n-empty description="本周暂无课程安排" size="huge">
              <template #icon>
                <n-icon :component="CalendarOutline" />
              </template>
            </n-empty>
          </div>
        </n-card>
      </section>

      <section v-if="!loading && dashboardData" class="mb-8">
        <h2 class="text-2xl font-bold mb-4 text-slate-700">授课计划分析</h2>
        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px;">
          <n-card class="bg-white shadow-sm">
             <h3 class="text-lg font-semibold mb-2 text-slate-600">月度授课量（计划 vs 完成）</h3>
            <div style="width: 100%; height: 320px;" ref="yearlyPlanChartRef"></div>
          </n-card>
          <n-card class="bg-white shadow-sm">
            <h3 class="text-lg font-semibold mb-4 text-slate-600">季度计划完成率</h3>
            <div class="space-y-4 p-4">
              <div v-for="(item, index) in planCompletionData" :key="index">
                <div class="flex justify-between mb-1">
                  <span class="text-sm text-gray-600">{{ item.name }}</span>
                  <span class="text-sm font-medium" :style="{ color: item.color }">{{ item.value }}%</span>
                </div>
                <n-progress
                  type="line"
                  :percentage="item.value"
                  :color="item.color"
                  :height="8"
                  :border-radius="4"
                  :show-indicator="false"
                />
              </div>
            </div>
          </n-card>
        </div>
        <div>
          <n-card class="bg-white shadow-sm w-full">
             <h3 class="text-lg font-semibold mb-2 text-slate-600">学期授课计划状态分布</h3>
            <div class="w-full h-[320px]" ref="teachingSemesterPlanChartRef"></div>
          </n-card>
        </div>
      </section>

      <section v-if="!loading && dashboardData" class="mb-8">
        <h2 class="text-2xl font-bold mb-4 text-slate-700">干部数据深度分析</h2>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
          <n-card class="bg-white shadow-sm">
            <h3 class="text-lg font-semibold mb-2 text-slate-600">干部级别分布</h3>
            <div style="width: 100%; height: 280px;" ref="cadreLevelDistributionChartRef"></div>
          </n-card>
          <n-card class="bg-white shadow-sm">
            <h3 class="text-lg font-semibold mb-2 text-slate-600">干部学历构成</h3>
            <div style="width: 100%; height: 280px;" ref="cadreEducationChartRef"></div>
          </n-card>
        </div>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
          <n-card class="bg-white shadow-sm">
            <h3 class="text-lg font-semibold mb-2 text-slate-600">热门拟授课方向</h3>
            <div style="width: 100%; height: 280px;" ref="teachingAreaPopularityChartRef"></div>
          </n-card>
          <n-card class="bg-white shadow-sm">
            <h3 class="text-lg font-semibold mb-2 text-slate-600">各单位培训人数</h3>
            <div style="width: 100%; height: 280px;" ref="distributionChartRef"></div>
          </n-card>
        </div>
      </section>

      <section v-if="!loading && dashboardData" class="mb-8">
        <h2 class="text-2xl font-bold mb-4 text-slate-700">单位与高校分析</h2>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <n-card class="bg-white shadow-sm">
                <h3 class="text-lg font-semibold mb-2 text-slate-600">中央单位类型分布</h3>
                <div style="width: 100%; height: 280px;" ref="unitTypeDistributionChartRef"></div>
            </n-card>
            <n-card class="bg-white shadow-sm">
                <h3 class="text-lg font-semibold mb-2 text-slate-600">合作高校地域分布</h3>
                <div style="width: 100%; height: 280px;" ref="universityLocationChartRef"></div>
            </n-card>
        </div>
      </section>
      </div>
      <!-- Dashboard内容结束 -->

    </div>

    <n-layout-footer class="bg-slate-100 shadow-inner py-4 px-6 text-center text-gray-500 border-t border-slate-200">
      <p>综合管理系统数据大屏 © {{ new Date().getFullYear() }}</p>
    </n-layout-footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { NCard, NIcon, NTag, NText, NEmpty, NDivider, NProgress, NLayoutFooter, NButton, NSpin } from 'naive-ui'
import {
  BookOutline,
  TrendingUpOutline,
  PeopleOutline,
  BusinessOutline,
  SchoolOutline,
  PodiumOutline,
  PersonOutline,
  BusinessSharp,
  CalendarOutline,
  LocationOutline
} from '@vicons/ionicons5'
import * as echarts from 'echarts'

// 数据统计
const statistics = ref({
  teachingPlans: 0,
  teachingPlansGrowth: 0,
  cadres: 0,
  cadresGrowth: 0,
  centralUnits: 0,
  centralUnitsGrowth: 0,
  universities: 0,
  universitiesGrowth: 0,
  departmentLevelCadres: 0
})

// 本周课程数据
const weeklyClassData = ref([])

// 状态映射
const statusMap = {
  planned: { text: '计划中', color: '#3b82f6', tagType: 'info' },
  ongoing: { text: '进行中', color: '#f59e0b', tagType: 'warning' },
  completed: { text: '已完成', color: '#10b981', tagType: 'success' },
  cancelled: { text: '已取消', color: '#ef4444', tagType: 'error' }
}

// 季度计划完成率数据
const planCompletionData = ref([])

// 数据大屏数据
const dashboardData = ref(null)
const loading = ref(true)

// 获取数据大屏数据
const fetchDashboardData = async () => {
  try {
    loading.value = true
    const response = await fetch('http://localhost:3001/api/dashboard/report')

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const result = await response.json()

    if (result.data) {
      dashboardData.value = result.data

      // 更新各个数据
      statistics.value = result.data.statistics
      weeklyClassData.value = result.data.weeklyClassData || []
      planCompletionData.value = result.data.planCompletionData || []

      console.log('数据大屏数据加载成功:', result.data)
    }
  } catch (error) {
    console.error('获取数据大屏数据失败:', error)
    console.error('错误详情:', error.message)
  } finally {
    loading.value = false
  }
}



// 图表引用
const yearlyPlanChartRef = ref(null)
const teachingSemesterPlanChartRef = ref(null)
const cadreLevelDistributionChartRef = ref(null)
const cadreEducationChartRef = ref(null)
const teachingAreaPopularityChartRef = ref(null)
const distributionChartRef = ref(null)
const unitTypeDistributionChartRef = ref(null)
const universityLocationChartRef = ref(null)

// 通用图表初始化函数
const initChart = (elementRef, defaultWidth, defaultHeight, option, name) => {
  const element = elementRef.value
  if (element) {
    // 确保元素有明确的尺寸
    if (element.clientWidth === 0 || element.clientHeight === 0) {
      element.style.width = defaultWidth
      element.style.height = defaultHeight
    }

    try {
      const chart = echarts.init(element)
      chart.setOption(option)
      window.addEventListener('resize', () => chart.resize())
      console.log(`${name}图表初始化成功`)
    } catch (error) {
      console.error(`初始化${name}图表失败:`, error)
    }
  } else {
    console.warn(`${name}图表元素未找到`)
  }
}

// 初始化所有图表
const initCharts = () => {
  // 延迟执行每个图表初始化，避免DOM未准备好的问题
  setTimeout(() => initYearlyPlanChart(), 50)
  setTimeout(() => initTeachingSemesterPlanChart(), 100)
  setTimeout(() => initCadreLevelDistributionChart(), 150)
  setTimeout(() => initCadreEducationChart(), 200)
  setTimeout(() => initTeachingAreaPopularityChart(), 250)
  setTimeout(() => initDistributionChart(), 300)
  setTimeout(() => initUnitTypeDistributionChart(), 350)
  setTimeout(() => initUniversityLocationChart(), 400)
}

// 月度授课量图表
const initYearlyPlanChart = () => {
  const element = yearlyPlanChartRef.value
  if (element && dashboardData.value) {
    // 确保元素有明确的尺寸
    if (element.clientWidth === 0 || element.clientHeight === 0) {
      element.style.width = '100%'
      element.style.height = '320px'
    }

    try {
      const chart = echarts.init(element)
      const monthlyStats = dashboardData.value.monthlyStats || []

      chart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['计划', '完成'] },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: monthlyStats.map(item => item.month)
        },
        yAxis: { type: 'value' },
        series: [
          {
            name: '计划',
            type: 'bar',
            data: monthlyStats.map(item => item.planned),
            itemStyle: { color: '#3b82f6' }
          },
          {
            name: '完成',
            type: 'bar',
            data: monthlyStats.map(item => item.completed),
            itemStyle: { color: '#10b981' }
          }
        ]
      })
      // 监听窗口大小变化
      window.addEventListener('resize', () => chart.resize())
    } catch (error) {
      console.error('初始化月度授课量图表失败:', error)
    }
  }
}

// 学期授课计划状态分布图表
const initTeachingSemesterPlanChart = () => {
  const element = teachingSemesterPlanChartRef.value
  if (element && dashboardData.value) {
    // 确保元素有明确的尺寸
    if (element.clientWidth === 0 || element.clientHeight === 0) {
      element.style.width = '100%'
      element.style.height = '320px'
    }

    try {
      const chart = echarts.init(element)
      const planStatusDistribution = dashboardData.value.planStatusDistribution || []

      chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: '10%',
          left: 'center'
        },
        series: [{
          name: '授课计划状态',
          type: 'pie',
          radius: ['30%', '60%'],
          center: ['50%', '40%'],
          data: planStatusDistribution.map(item => ({
            value: item.value,
            name: item.name,
            itemStyle: {
              color: item.name === '计划中' ? '#3b82f6' :
                     item.name === '进行中' ? '#f59e0b' :
                     item.name === '已完成' ? '#10b981' : '#ef4444'
            }
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })
      window.addEventListener('resize', () => chart.resize())
    } catch (error) {
      console.error('初始化学期授课计划状态分布图表失败:', error)
    }
  }
}

// 干部级别分布图表
const initCadreLevelDistributionChart = () => {
  const element = cadreLevelDistributionChartRef.value
  if (element && dashboardData.value) {
    if (element.clientWidth === 0 || element.clientHeight === 0) {
      element.style.width = '100%'
      element.style.height = '280px'
    }
    try {
      const chart = echarts.init(element)
      const levelDistribution = dashboardData.value.cadreAnalysis?.levelDistribution || []

      chart.setOption({
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c}人 ({d}%)' },
        legend: { orient: 'horizontal', bottom: '5%', left: 'center' },
        series: [{
          name: '干部级别', type: 'pie', radius: ['40%', '70%'], center: ['50%', '45%'],
          data: levelDistribution.map((item, index) => ({
            value: item.value,
            name: item.name,
            itemStyle: {
              color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'][index % 4]
            }
          }))
        }]
      })
      window.addEventListener('resize', () => chart.resize())
    } catch (error) { console.error('初始化干部级别分布图表失败:', error) }
  }
}

// 简化的图表初始化函数
const initCadreEducationChart = () => {
  const element = cadreEducationChartRef.value
  if (element && dashboardData.value) {
    if (element.clientWidth === 0) element.style.width = '100%'
    if (element.clientHeight === 0) element.style.height = '280px'
    try {
      const chart = echarts.init(element)
      const educationDistribution = dashboardData.value.cadreAnalysis?.educationDistribution || []

      chart.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: educationDistribution.map(item => item.name) },
        yAxis: { type: 'value', name: '人数' },
        series: [{ name: '人数', type: 'bar', data: educationDistribution.map(item => item.value), itemStyle: { color: '#10b981' } }]
      })
      window.addEventListener('resize', () => chart.resize())
    } catch (error) { console.error('初始化干部学历构成图表失败:', error) }
  }
}



// 简化的图表初始化函数
const initTeachingAreaPopularityChart = () => {
  const element = teachingAreaPopularityChartRef.value
  if (element && dashboardData.value) {
    if (element.clientWidth === 0) element.style.width = '100%'
    if (element.clientHeight === 0) element.style.height = '280px'
    try {
      const chart = echarts.init(element)
      const teachingDirections = dashboardData.value.cadreAnalysis?.teachingDirections || []

      chart.setOption({
        tooltip: { trigger: 'axis' },
        grid: { left: '15%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'value' },
        yAxis: { type: 'category', data: teachingDirections.map(item => item.name).reverse() },
        series: [{ type: 'bar', data: teachingDirections.map(item => item.value).reverse(), itemStyle: { color: '#8b5cf6' } }]
      })
      window.addEventListener('resize', () => chart.resize())
    } catch (error) { console.error('初始化热门拟授课方向图表失败:', error) }
  }
}



// 各单位培训人数图表
const initDistributionChart = () => {
  const element = distributionChartRef.value
  if (element && dashboardData.value) {
    if (element.clientWidth === 0) element.style.width = '100%'
    if (element.clientHeight === 0) element.style.height = '280px'
    try {
      const chart = echarts.init(element)
      const unitTraining = dashboardData.value.unitUniversityAnalysis?.unitTraining || []

      chart.setOption({
        tooltip: { trigger: 'axis' },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: unitTraining.map(item => item.name) },
        yAxis: { type: 'value', name: '人数' },
        series: [{ type: 'bar', data: unitTraining.map(item => item.value), itemStyle: { color: '#3b82f6' } }]
      })
      window.addEventListener('resize', () => chart.resize())
    } catch (error) { console.error('初始化各单位培训人数图表失败:', error) }
  }
}

const initUnitTypeDistributionChart = () => {
  const element = unitTypeDistributionChartRef.value
  if (element && dashboardData.value) {
    if (element.clientWidth === 0) element.style.width = '100%'
    if (element.clientHeight === 0) element.style.height = '280px'
    try {
      const chart = echarts.init(element)
      const unitTypes = dashboardData.value.unitUniversityAnalysis?.unitTypes || []

      chart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: '5%', left: 'center' },
        series: [{
          type: 'pie', radius: '60%', center: ['50%', '45%'],
          data: unitTypes.map((item, index) => ({
            value: item.value,
            name: item.name,
            itemStyle: { color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'][index % 4] }
          }))
        }]
      })
      window.addEventListener('resize', () => chart.resize())
    } catch (error) { console.error('初始化中央单位类型分布图表失败:', error) }
  }
}

const initUniversityLocationChart = () => {
  const element = universityLocationChartRef.value
  if (element && dashboardData.value) {
    if (element.clientWidth === 0) element.style.width = '100%'
    if (element.clientHeight === 0) element.style.height = '280px'
    try {
      const chart = echarts.init(element)
      const universityLocations = dashboardData.value.unitUniversityAnalysis?.universityLocations || []

      chart.setOption({
        tooltip: { trigger: 'axis' },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: universityLocations.map(item => item.name) },
        yAxis: { type: 'value', name: '数量' },
        series: [{ type: 'bar', data: universityLocations.map(item => item.value), itemStyle: { color: '#10b981' } }]
      })
      window.addEventListener('resize', () => chart.resize())
    } catch (error) { console.error('初始化合作高校地域分布图表失败:', error) }
  }
}

onMounted(async () => {
  // 先获取数据
  await fetchDashboardData()

  // 使用window.onload确保DOM完全加载
  if (document.readyState === 'complete') {
    setTimeout(() => initCharts(), 200)
  } else {
    window.addEventListener('load', () => {
      setTimeout(() => initCharts(), 200)
    })
  }
})
</script>
